<template>
     <div class="detail">
      <van-nav-bar
title="商品列表"
left-text="返回"
right-text="。。。"
left-arrow
@click-left="onClickLeft"
/>
<!-- @click-right="onClickRight" -->
      <div class="head" :style="{ backgroundImage: `url(${shopinfo.info&&shopinfo.info.poi_back_pic_url})`}">
        <div class="head-top">
          <img :src="shopinfo.info&&shopinfo.info.picUrl" alt="">
          <span>{{shopinfo.info&&shopinfo.info.name}}</span>
        </div>
       <div class="head-center">
        <input type="text" placeholder="搜索">
        <p>点餐</p>
        <p>评价</p>
        <p>商家</p>
       </div>
       <div class="head-bottom">
        <div>
            <span>商家配送{{shopinfo.info&&shopinfo.info.deliveryTimeTip}}</span>
            <span>距离{{shopinfo.info&&shopinfo.info.distance}}</span>
        </div>
       </div>
       <van-icon v-if="(changeStatus==false)" class="shoucang " name="star"  @click="shoucang" />
       <van-icon  v-if="(changeStatus==true)" class="shoucang active" name="star"  @click="shoucang" />
     </div>
     <div class="center">
        <div class="center-left">
            <div @click="shopinfoIndex=index" class="item" v-for="(item,index) in shopinfo.taglist" :key="index">{{item.name}}</div>
        </div>
        <div class="center-right">
            <div class="item"  v-for="(item,index) in shopinfo.taglist&&shopinfo.taglist[shopinfoIndex].goodlist" :key="index">
              <div class="item-left">
                <img :src="item.picture" alt="">
            </div>
            <div class="item-right">
               <p>{{item.name}}</p>
               <p>{{item.promotion_info}}</p>
               <p>￥{{item.min_price}}</p>
               <button @click="tianjia(item)">+</button>
            </div>
            </div>
        </div>
     </div>
     <van-submit-bar :price="zongjia?zongjia:parseInt('0000')" button-text="提交订单" @submit="onSubmit">
  <van-checkbox >全选</van-checkbox>
 <!-- //v-model="checked" -->
</van-submit-bar>
<div class="jiesuan" v-if="(openJiesuan==true)">
  <p class="yixuan">已选商品</p>
  <div class="gouwuche">
            <div class="item"  v-for="(item,index) in gouwuche" :key="index">
              <div class="gouwuche-left">
                <!-- <input type="checkbox"> -->
                <img :src="item.picture" alt="">
            </div>
            <div class="gouwuche-right">
               <p>{{item.name}}</p>
               <p>{{item.promotion_info}}</p>
               <p>￥{{item.min_price}}</p>
               <button @click="jianshao(item,index)">-</button>
               <button >{{item.count}}</button>
               <button @click="tianjia(item,index)">+</button>
            </div>
            </div>
        </div>
        <span class="clear" @click="clear">清空</span>
  <span class="close" @click="onSubmit">X</span>
</div>
</div>
</template>
<script setup>
import {dp_shopinfo,shoucang_shop,unshoucang_shop,shopcar_list,shopcar_add,shopcar_jian,shopcar_clear} from '../api/api'

import {ref,onMounted} from 'vue'
import { useRoute,useRouter} from 'vue-router';
 var $route=useRoute()
 var $router=useRouter()
     var shopinfo=ref([])
  var shopinfoIndex=ref(0)
     var changeStatus=ref(null)
     var  userId=ref(null)
     var shopId=ref(null)
     var openJiesuan=ref(false)
     var zongjia=ref(0)
     var gouwuche=ref([])
     onMounted(()=>{
       //店铺列表
       dp_shopinfo({params:{id:$route.params.id}}).then((res)=>{
      
           shopinfo.value=res.data.shopinfo
           console.log(shopinfo);
           window.localStorage.setItem('shopId',res.data.shopinfo.mtWmPoiId)
           if( changeStatus.value==null ||false){
                  changeStatus.value= localStorage.getItem('status')&&localStorage.getItem('status')=='true' || false
                }else if(changeStatus.value==true){
                 changeStatus.value= localStorage.getItem('status')&&localStorage.getItem('status')=='false' || true
                }
           changeStatus.value=localStorage.getItem('stauts')
       })
      //  购物车列表
       userId.value=localStorage.getItem('userId') 
       shopcar_list({params:{userid:2136}}).then((res)=>{
         console.log(res.data.list,'购物车列表');
         res.data.list.map((item)=>{
           zongjia.value=(zongjia+(item.min_price*100))*item.count
         })
          gouwuche.value=res.data.list
       })
     })
       
 
       //购物车+1
      var tianjia=(item,index)=>{
         userId.value=localStorage.getItem('userId')
     
         console.log(userId,item.id);
         shopcar_add({userid:userId.value,goodid:item.id}).then((res)=>{
           console.log(res.data,"加一了");
             item.count++
             
         
         })
         shopcar_list({params:{userid:userId.value}}).then((res)=>{
         console.log(res.data,'购物车列表');
         zongjia.value=zongjia.value+(item.min_price*100)
          gouwuche.value=res.data.list
       })
       }
       //购物车-1
       var jianshao=(item,index)=>{
         userId.value=localStorage.getItem('userId')
     
         console.log(userId,item.id);
         shopcar_jian({userid:userId.value,goodid:item.id}).then((res)=>{
           item.count--
           
         zongjia.value=zongjia.value-(item.min_price*100)
           console.log(res.data,"减一了");
         })
         shopcar_list({params:{userid:userId.value}}).then((res)=>{
         console.log(res.data,'购物车列表');
          gouwuche.value=res.data.list
       })
       }
        var clear=(item,index)=>{
         userId.value=localStorage.getItem('userId')
         shopcar_clear({userid:userId.value}).then((res)=>{
           console.log(res.data);
           
         })
         shopcar_list({params:{userid:userId.value}}).then((res)=>{
         console.log(res.data,'购物车列表');
          gouwuche.value=res.data.list
         zongjia.value=0*100
       })
       }
       //点击左上角跳回上一页
      var onClickLeft=()=>{
         $router.go(-1)
       }
       //购物车显示隐藏判断
      var  onSubmit=()=>{
       if( openJiesuan.value==true){
         openJiesuan.value=false
       }else{
         openJiesuan.value=true
       }
         
       }
       //收藏和取消收藏
      var shoucang=()=>{
         userId.value=localStorage.getItem('userId')
         shopId.value=localStorage.getItem('shopId')
         if(changeStatus.value==false){
           console.log(userId,shopId);
           shoucang_shop({userid:userId.value,shopid:shopId.value}).then((res)=>{
             console.log(res.data);
             Toast.success('收藏成功');
             window.localStorage.setItem('status',true)
             changeStatus.value= localStorage.getItem('status')&&localStorage.getItem('status')=='false' || true
           })
         }else if( changeStatus.value==true){
           console.log(userId);
           unshoucang_shop({userid:userId.value,shopid:shopId.value}).then((res)=>{
             console.log(res.data);
             Toast.success('已取消收藏!');
             window.localStorage.setItem('status',false)
             changeStatus.value= localStorage.getItem('status')&&localStorage.getItem('status')=='true' || false
           })
         }
       }
</script>

<style scoped>

.jiesuan .yixuan{
    font-size: 20px;
    margin: 10px;
  }
  .close{
    position: absolute;
    right: 5%;
    top: 1%;
    font-size: 25px;
  }
  .clear{
    position: absolute;
    right: 15%;
    top: 1%;
    font-size: 20px;
  }
  .jiesuan{
    position: fixed;
    height: 400px;
    width: 100%;
    left: 0%;
    bottom: 0px;
    background: white;
  }
  .center-left{
    width: 30%;
    overflow: auto;
    box-sizing: border-box;
  }
  
  .shoucang {
    position: absolute;
    right: 10px;
   top: 40px;
   font-size: 25px;
   color: white;
  }
  .center-right{
    overflow: auto;
    width: 70%;
  }
  .gouwuche{
    overflow: auto;
    height:310px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
  }
  .active{
    color: orange;
  }

  .back{
    height: 40px;
    font-size: 30px;
  }
  .center-right .item{
    display:flex ;
    width:100%;
position: relative;
  }
  .gouwuche .item{
    display:flex ;
    width:100%;
position: relative;
  }
  .item-right button{
    position: absolute;
    right: 5%;
    bottom: 0%;
    width: 25px;
    height: 25px;
    background-color:red;
    color: white;
    border: 0;
    border-radius: 50%;
    font-size: 22px;
  }
  .gouwuche-right button{
    position: absolute;
    right: 5%;
    bottom: 0%;
    width: 25px;
    height: 25px;
    background-color:red;
    color: white;
    border: 0;
    border-radius: 50%;
    font-size: 22px;
  }
  .gouwuche-right button:nth-of-type(1){
    position: absolute;
    right: 20%;
    bottom: 0%;
   
  }
  .gouwuche-right button:nth-of-type(2){
    position: absolute;
    right: 12.5%;
    bottom: 0%;
    background-color: white;
    color: black;
   
  }
  .item-right p:nth-of-type(3){
    font-size: 12px;
  }
  .gouwuche-right p:nth-of-type(3){
    font-size: 12px;
  }
  .item-right p:nth-of-type(3){
    color: red;
    position: absolute;
    bottom: 0px;
    font-size: 14px;
  }
  .gouwuche-right p:nth-of-type(3){
    color: red;
    position: absolute;
    bottom: 0px;
    font-size: 14px;
  }
  
  .center{
    display: flex;
    height: 365px;
    justify-content: space-between;
  }
  .center .center-left .item {
    font-size: 12px;
    width: 100px;
   height: 50px;
   line-height: 50px;
   text-align: center;
  }
  .item-left img{
    width: 100px;
    height: 100px;
  }
  .gouwuche-left img{
    width: 100px;
    height: 100px;
  }
 .head {
    height: 200px;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 0 10px;
    position: relative;
 }
 .head-center{
    display: flex;
    color: white;
 }
 .head-top{
    color: white;
 }
 .head-top img{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    vertical-align: middle;
 }
 .head-center input{
    border: 0;
    border-radius: 20px;
    width: 80px;
    height: 30px;
    text-align: center;
 }
 .head-center p{
    margin-right: 35px;
    
    margin-top: 5px;
 }
 .head-center p:nth-of-type(1){
    margin-left: 20px;
 }
 .head-bottom{
    height: 80px;
    width:100%;
    background-color: white;
    line-height: 80px;
 }
 .head-bottom div{
    box-sizing: border-box;
    padding: 0px 10px;
 }
 .head-bottom span{
   margin-right: 10px;
   font-size: 13px;
   font-weight: bold;
 }
</style>